var vm = new Vue({
    el: '#app',
    data: {
        host: host,

        error_name: false,
        error_password: false,
        error_check_password: false,
        error_phone: false,
        error_allow: false,
        error_sms_code: false,
        error_name_message: '',
        error_phone_message: '',
        error_sms_code_message: '',
        error_image_code: '',

        sms_code_tip: '获取短信验证码',
        sending_flag: false, // 正在发送短信标志

        // 图形验证码:
        image_code_id: '',
        image_code_url: '',

        username: '',
        password: '',
        password2: '',
        mobile: '',
        sms_code: '',
        allow: false,
        image_code: '',
        error_image_code_message: ''
    },
    mounted: function () {
        console.log('Vue实例已挂载，准备加载图形验证码');
        console.log('当前host:', this.host);
        // 向服务器获取图片验证码
        this.generate_image_code();
        console.log('图形验证码加载完成，image_code_url:', this.image_code_url);
    },
    methods: {
        // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
        generate_image_code: function () {
            console.log('开始生成图形验证码...');
            // 生成一个编号 : 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
            this.image_code_id = generateUUID();
            console.log('生成的图形验证码ID:', this.image_code_id);
            // 设置页面中图片验证码img标签的src属性
            this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
            console.log('图形验证码URL:', this.image_code_url);
        },
        // 检查用户名
        check_username: function () {
            var re = /^[a-zA-Z0-9_-]{5,20}$/;
            var re2 = /^[0-9]+$/;
            if (re.test(this.username) && !re2.test(this.username)) {
                this.error_name = false;
            } else {
                this.error_name_message = '请输入5-20个字符的用户名且不能为纯数字';
                this.error_name = true;
            }
            // 检查重名
            if (this.error_name == false) {
                var url = this.host + '/usernames/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json',
                    withCredentials: true,
                })
                    .then(response => {
                        if (response.data.count > 0) {
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            this.error_name = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },
        check_pwd: function () {
            var len = this.password.length;
            if (len < 8 || len > 20) {
                this.error_password = true;
            } else {
                this.error_password = false;
            }
        },
        check_cpwd: function () {
            if (this.password != this.password2) {
                this.error_check_password = true;
            } else {
                this.error_check_password = false;
            }
        },
        // 检查手机号
        check_phone: function () {
            var re = /^1[3-9]\d{9}$/;

            if (re.test(this.mobile)) {
                this.error_phone = false;
            } else {
                this.error_phone_message = '请输入正确的手机号码';
                this.error_phone = true;
            }
            if (this.error_phone == false) {
                var url = this.host + '/mobiles/' + this.mobile + '/count/';
                axios.get(url, {
                    responseType: 'json',
                    withCredentials: true,
                })
                    .then(response => {
                        if (response.data.count > 0) {
                            this.error_phone_message = '手机号已存在';
                            this.error_phone = true;
                        } else {
                            this.error_phone = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },
        // 检查图片验证码
        check_image_code: function () {
            if (!this.image_code) {
                this.error_image_code_message = '请填写图片验证码';
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }
        },
        check_sms_code: function () {
            if (!this.sms_code) {
                this.error_sms_code_message = '请填写短信验证码';
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },
        check_allow: function () {
            if (!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 发送手机短信验证码
        send_sms_code: function () {
            if (this.sending_flag == true) {
                return;
            }
            this.sending_flag = true;

            // 校验参数，保证输入框有数据填写
            this.check_phone();
            this.check_image_code();

            if (this.error_phone == true || this.error_image_code == true) {
                this.sending_flag = false;
                return;
            }

            // 向后端接口发送请求，让后端发送短信验证码
            var url = this.host + '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code
                + '&image_code_id=' + this.image_code_id

            console.log('请求URL:', url);
            console.log('image_code:', this.image_code);
            console.log('image_code_id:', this.image_code_id);

            axios.get(url, {
                responseType: 'json',
                withCredentials: true,
            })
                .then(response => {
                    console.log('短信验证码发送成功:', response.data);
                    // 表示后端发送短信成功
                    // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                    var num = 60;
                    // 设置一个计时器
                    var t = setInterval(() => {
                        if (num == 1) {
                            // 如果计时器到最后, 清除计时器对象
                            clearInterval(t);
                            // 将点击获取验证码的按钮展示的文本回复成原始文本
                            this.sms_code_tip = '获取短信验证码';
                            // 将点击按钮的onclick事件函数恢复回去
                            this.sending_flag = false;
                        } else {
                            num -= 1;
                            // 展示倒计时信息
                            this.sms_code_tip = num + '秒';
                        }
                    }, 1000, 60)
                })
                .catch(error => {
                    console.log('短信验证码发送失败:', error);
                    if (error.response) {
                        console.log('错误状态码:', error.response.status);
                        console.log('错误数据:', error.response.data);
                        if (error.response.status == 400) {
                            this.error_sms_code_message = error.response.data.errmsg;
                            this.error_sms_code = true;
                        } else {
                            console.log(error.response.data);
                        }
                    } else {
                        console.log('网络错误:', error.message);
                    }
                    this.sending_flag = false;
                })
        },
        // 注册
        on_submit: function () {
            console.log('注册按钮被点击了');
            console.log('当前表单数据:', {
                username: this.username,
                password: this.password,
                password2: this.password2,
                mobile: this.mobile,
                sms_code: this.sms_code,
                image_code: this.image_code,
                allow: this.allow
            });

            this.check_username();
            this.check_pwd();
            this.check_cpwd();
            this.check_phone();
            this.check_image_code();
            this.check_sms_code();
            this.check_allow();

            console.log('验证结果:', {
                error_name: this.error_name,
                error_password: this.error_password,
                error_check_password: this.error_check_password,
                error_phone: this.error_phone,
                error_sms_code: this.error_sms_code,
                error_image_code: this.error_image_code,
                error_allow: this.error_allow
            });



            // 点击注册按钮之后, 发送请求 (下面的代码是通过请求体传参的)
            if (this.error_name == false && this.error_password == false && this.error_check_password == false
                && this.error_phone == false && this.error_sms_code == false && this.error_image_code == false && this.error_allow == false) {
                console.log('所有验证通过，准备发送注册请求');
                axios.post(this.host + '/register/', {
                    username: this.username,
                    password: this.password,
                    password2: this.password2,
                    mobile: this.mobile,
                    sms_code: this.sms_code,
                    allow: this.allow
                }, {
                    responseType: 'json',
                    withCredentials: true,
                })
                    .then(response => {
                        console.log('注册响应:', response.data);
                        if (response.data.code == 0) {
                            location.href = 'index.html';
                        }
                        if (response.data.code == 400) {
                            alert(response.data.errmsg)
                        }
                    })
                    .catch(error => {
                        console.log('注册请求失败:', error);
                        if (error.response && error.response.status == 400) {
                            if ('non_field_errors' in error.response.data) {
                                this.error_sms_code_message = error.response.data.errmsg || error.response.data.message || '数据有误';
                            } else {
                                this.error_sms_code_message = '数据有误';
                            }
                            this.error_sms_code = true;
                        } else {
                            console.log(error);
                        }
                    })
            } else {
                console.log('验证失败，无法提交注册');
                alert('请检查表单填写是否正确完整');
            }
        }
    }
});